<script setup>
import ImageView from '@/components/ImageView/index.vue'
import ProductSku from './components/ProductSku.vue'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getProductDetailAPI } from '@/apis/product'
import { add2CartAPI } from '@/apis/shopCart'

let route = useRoute()
let id = route.params.id

const productDetail = ref({})
const skuId = ref('')
const price = ref(0)

const changeSkuId = (id) => {
  skuId.value = id
  const sku = productDetail.value.skus.find(item => item.id === id)
  price.value = sku.price
}

const doShopping = async () => {
  if (!skuId.value) {
    ElMessage({ type: 'warning', message: '请选择商品规格' })
    return
  }
  const res = await add2CartAPI({ 
    productId: productDetail.value.id,
    skuId: skuId.value
  })
  if (res.code === 2000) {
    ElMessage({ type: 'success', message: '添加商品成功' })
  }
}

onMounted(async () => {
  const res = await getProductDetailAPI(id)
  console.log(res)
  if (res.code === 2000) {
    productDetail.value = res.data
  }
})
</script>

<template>
  <div class="xtx-goods-page">
    <div class="container">
      <!-- 商品信息 -->
      <div class="info-container">
        <div>
          <div class="goods-info">
            <div class="media">
              <!-- 图片预览区 -->
              <ImageView :image-list="[ productDetail.pic ]" />
            </div>
            <div class="spec">
              <!-- 商品信息区 -->
              <p class="g-name">{{ productDetail.title }}</p>
              <p class="g-desc">{{ productDetail.description }}</p>
              <p class="g-price">
                <template v-if="price !== 0">
                  <span>{{ price }}</span>
                </template>
                <template v-else>
                  <span v-if="productDetail.minPrice === productDetail.maxPrice">{{ productDetail.minPrice }}</span>
                  <span v-else>{{ productDetail.minPrice }}-{{ productDetail.maxPrice }}</span>
                </template>
              </p>
              <div class="g-service">
                <dl>
                  <dt>销量</dt>
                  <dd>本月共售 999+ 单</dd>
                </dl>
                <dl>
                  <dt>服务</dt>
                  <dd>
                    <span>无忧退货</span>
                    <span>快速退款</span>
                    <span>免费包邮</span>
                    <a href="javascript:;">了解详情</a>
                  </dd>
                </dl>
              </div>
              <!-- sku -->
              <ProductSku :skus="productDetail.skus" @select-sku="changeSkuId" />
              <div class="btn-box"><el-button size="large" class="btn" @click="doShopping">加入购物车</el-button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped lang='scss'>
.xtx-goods-page {
  width: 1280px;
  margin: 20px auto;

  .goods-info {
    min-height: 400px;
    background: #fff;
    display: flex;

    .media {
      width: 580px;
      height: 100%;
      padding: 30px 50px;
    }

    .spec {
      flex: 1;
      padding: 30px 30px 30px 0;
    }
  }

  .g-name {
    font-size: 22px;
  }

  .g-desc {
    color: #999;
    margin-top: 10px;
  }

  .g-price {
    margin-top: 10px;

    span {
        color: $priceColor;
        margin-right: 10px;
        font-size: 22px;

      &::before {
        content: "¥";
        font-size: 14px;
      }
    }
  }

  .g-service {
    background: #f5f5f5;
    width: 500px;
    padding: 20px 10px 0 10px;
    margin-top: 10px;

    dl {
      padding-bottom: 20px;
      display: flex;
      align-items: center;

      dt {
        width: 50px;
        color: #999;
      }

      dd {
        color: #666;

        &:last-child {
          span {
            margin-right: 10px;

            &::before {
              content: "•";
              color: $xtxColor;
              margin-right: 2px;
            }
          }

          a {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .btn {
    margin-top: 20px;
  }
}
</style>